<script setup>
import { ref } from 'vue';

const str = ref("");
const list = ref([
  { isComplete: false, text: "吃饭" },
  { isComplete: false, text: "睡觉" },
  { isComplete: false, text: "接着吃" }
]);
// 添加错误提示状态
const errorMessage = ref("");

function add() {
  if (!str.value.trim()) {
    errorMessage.value = "请输入让自己变的更好的任务";
    setTimeout(() => {
      errorMessage.value = "";
    }, 3000);
    return;
  }
  
  list.value.push({
    isComplete: false,
    text: str.value
  });
  str.value = "";
  errorMessage.value = ""; // 成功添加后清除错误
}

function del(index) {
  list.value.splice(index, 1);
}
</script>

<template>
  <div class="background"></div>
  <div class="todo-app">
    <div class="title">xxx的Todolist</div>
    <div class="todo-from">
      <input 
        v-model="str"
        class="todo-input" 
        type="text" 
        placeholder="Add a todo">
      <div 
        @click="add" 
        class="todo-button">
        add todo
      </div>
    </div>
     <!-- 添加错误提示 -->
    <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
    <div class="todo-items">
      <div v-if="list.length === 0" class="no-todo-tip">暂无待办事项，请添加新任务</div>
      <div v-else>
        <div v-for="(item, index) in list" :key="index" :class="item.isComplete ? 'item completed' : 'item'">
          <div>
            <input v-model="item.isComplete" type="checkbox">
            <span class="name">{{ item.text }}</span>
          </div>
          <div v-on:click="del(index)" class="del">del</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
  .completed{
             text-decoration: line-through;
             opacity: .4;
  }
  .del{
       color: red;
  }
  .background{
    position: fixed;
    /* 将元素固定在浏览器窗口的某个位置，不随页面滚动而改变位置 */
    top: 0;
    /* 使元素的上边缘与浏览器窗口顶部重合 */
    left: 0;
    /* 使元素的左边缘与浏览器窗口左侧重合 */
    width: 100%;
    /* 让元素的宽度与浏览器窗口的宽度相同 */
    height: 100%;
    /* 让元素的宽度与浏览器窗口的高度相同 */
    background:
    linear-gradient(
    to right,
    rgb(195, 0, 255),
    blue,
    rgb(0, 179, 255),
    cyan
      );
      z-index: -1;
      /* 将元素置于页面其他元素的下方，避免遮挡其他内容 */
  }
  .todo-app {
    width: 98%;
    min-height: 500px; /*或 height: auto  */
    background-color: #FFFFFF;
    border-radius: 5px;
    margin-top: 40px;
    margin-left: 1%;
    padding-top: 30px;
    padding-bottom: 10px;
    box-sizing: border - box;
}
/* .todo-app {
    width: 98%;
    height: 500px;
    background-color: #FFFFFF;
    border-radius: 5px;
    margin-top: 40px;
    margin-left: 1%;
    padding-top: 30px;
    padding-bottom: 10px;
    box-sizing: border-box;
    overflow-y: auto; 
   /* 启用垂直滚动条 
} */
  body{
      background : linear-gradient(
      to right,
      rgb(195, 0, 255),
      blue,
      rgb(0, 179, 255),
      cyan)
  }
  .todo-input{
              margin-bottom: 20px;
              border: 1px solid #dfe1e5;
              outline: none;
              width:60%;
              height:50px;
              border-radius: 20px 0 0px 20px;
              padding-left: 15px;
              box-sizing: border-box;
  }
  .todo-from {
    margin-top: 20px;
    /* 移除原来的左内边距，避免影响居中 */
    /* margin - left: 30px; */
    display: flex;
    /* 添加以下样式实现横向居中 */
    justify-content: center; 
    box-sizing: border-box;
}
  .item{
       width: 80%;
       height: 50px;
       margin: auto;
       padding: 16px;
       box-sizing: border-box;
       border-radius: 20px;
       display: flex;
       box-shadow: rgba(149,157 ,165,.2) 0px 8px 20px;
       display : flex;
       align-items:center;
       justify-content: space-between;
       margin-bottom: 5px;
  }
  .no-todo-tip {
  text-align: center; /* 文字水平居中 */
  font-size: 16px; /* 调整字体大小 */
  color: #333; /* 深灰色，醒目且不刺激 */
  margin-top: 20px; /* 与上方元素保持一定间距 */
  font-weight: 500; /* 增加字体粗细 */
  padding: 20px; /* 添加内边距，使提示区域更明显 */
  background-color: #f5f5f5; /* 浅灰色背景，增强可见性 */
  border-radius: 8px; /* 圆角边框 */
  font-weight: 800; /* 半粗体，使文字更突出 */
}
/* 添加错误提示样式 */
.error-message {
  color: #ff4d4f;           /* 柔和的红色 */
  text-align: center;
  margin: 10px 0;           /* 上下间距 */
  font-size: 14px;
  padding: 10px 15px;       /* 适当内边距 */
  background-color: #fff2f0; /* 浅红色背景 */
  border-radius: 6px;
  transition: all 0.25s ease;
  max-width: 400px;         /* 限制最大宽度 */
  margin-left: auto;        /* 配合max-width实现居中 */
  margin-right: auto;
}
  .todo-button{
              user-select: none;
              cursor: pointer;
              color: #F0F0F0;
              border: 1px solid #dfe1e5;
              width: 100px;
              height: 50px;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 0 20px 20px 0;
              background: linear-gradient(to right, rgb(0, 149, 255), rgb(0, 179, 255), rgba(7, 225, 225, 0.826));
  }            
  .title{
    font-size: 30px;
    font-weight: bold;
    text-align: center;
  }
</style>
